@extends('admin.layouts.master')
@section('css')
<link rel="stylesheet" href="{{asset('/css/admin/operationlist.css')}}">
@endsection
@section('content')
{{--表头--}}
<div class="main_header clearfix">
    <div class="main_header_show clearfix">
        <span>数据报表</span>
    </div>
    <div class="main_header_goods clearfix">
        <div class="goods_shop">
            <span>1号店铺</span>
        </div>
    </div>
</div>
{{--营收报表的主体内容--}}
<div class="shop_statement clearfix">
    {{--营收报表的主体内容98%--}}
    <div class="shop_statement_form clearfix">
        <form id="revenue_form">
            <div class="shop_left">
                <select style="display: none" id="year" name="year">
                    @foreach($yearSection as $year)
                    <option value="{{$year}}">{{$year}}</option>
                    @endforeach
                </select>
                <select id="type" onchange="choice()" name="type">
                    <!--                    <option selected value="quarter">季度</option>-->
                    <option value="month">月</option>
                    <option value="week">周</option>
                    <option selected value="day">日</option>
                </select>
                <input id="daterange" name="daterange">
                <button id="submit" style="display: none" type="button" onclick="loadRevenue()" class="btn btn-xs btn-success">提交</button>
            </div>
        </form>
        <div class="shop_right">
            <div class="shop_style">
                <span>导出</span>
            </div>
        </div>
        {{--营收报表的统计折线图--}}
        <div class="shop_total_main" id="shop_total_main" style=" width:100%;height: 280px;">

        </div>
    </div>
</div>
{{--会员总数信息图表--}}
<div class="vip_info clearfix">
    <span>会员总数信息图表</span>
</div>
{{---会员总数信息图表的主体内容=====这里要分成三块--}}
<div class="vip_info_main clearfix">
    <div class="vip_list">
        <div class="vip_num" id="vip_num">
        </div>
        <div class="vip_people">
            <span>会员总人数</span>
        </div>
    </div>
    <div class="vip_list">
        <div class="vip_sex" id="vip_sex">
        </div>
        <div class="vip_people">
            <span>会员性别分布图</span>
        </div>
    </div>

    <div class="vip_list">
        <div class="vip_age" id="vip_age">
        </div>
        <div class="vip_people">
            <span>会员年龄分布图</span>
        </div>
    </div>

</div>
@endsection
@section('js')
{{-- =======================营收报表的折线图======================= --}}
<script>
    var year = $('#year').val();
    function choice(){
        console.log($('#type').val());
        if ($('#type').val() == 'day'){
            $('#year').hide();
            $('#submit').hide();
            $('#daterange').show();
            loadDayCharts();
        } else{
            $('#year').show();
            $('#submit').show();
            $('#daterange').hide();
        }
    }
    $('input[name="daterange"]').daterangepicker(
        {
            locale: {
            format: 'YYYY-MM-DD',
            applyLabel: "提交",
            cancelLabel: "返回",
        }
        , startDate: moment().subtract(7, 'days').format('YYYY-MM-DD'),
            endDate: moment().format('YYYY-MM-DD')//当前日期
    },
            function (start, end, label) {
                layer.load(1, {shade: [0.1, '#fff']});
                $.ajax({
                    url:"{{asset('admin/operation')}}",
                    type:'get',
                    dataType:'json',
                    data:{
                            type:'day',
                            startDate:start.format('YYYY-MM-DD'),
                            endDate:end.format('YYYY-MM-DD')
                        },
                    success:function(res){
                        layer.closeAll();
                        console.log(res);
                        option.xAxis.data = res.section;
                        option.series[0].data = res.allOrdersRevenues; //营收总额
                        option.series[1].data = res.allOrdersAmount; //销售数量
                        option.series[2].data = res.allOrdersSales; //销售总额
                        myChart.setOption(option);
                    },
                    error:function(err){
                        layer.closeAll();
                        alert('网络出错');
                    }
                });
            });
    //loadRevenue();
    loadDayCharts();
    var myChart = echarts.init(document.getElementById('shop_total_main'));
    var option = {
    title: {},
            legend: {
            data: ['营收总额(元)', '销售数量(件)', '销售总额(元)']
            },
            tooltip: {
            trigger: 'axis'
            },
            grid: {
            top: '11%',
                    left: '1%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
            },
            toolbox: {
//        下载
//        feature: {saveAsImage: {}}
            },
            xAxis: {
            type: 'category',
                    boundaryGap: false,
                    //data: res.section
            },
            yAxis: {
            type: 'value',
                    axisLabel: {
                    //formatter: '{value} 元'
                    },
                    boundaryGap: false  //边界的间隙
            },
            series: [
            {
            name: '营收总额(元)',
                    type: 'line',
                    legendHoverLink: false, //禁止高亮
                    itemStyle: {
                    normal: {
                    color: '#fc6175',
                            textStyle: {
                            label: {
                            color: '#fc6175'
                            }
                            },
                            lineStyle: {
                            color: '#fc6175',
                                    width: 1
                            }
                    }
                    },
                    //data: res.allOrdersRevenues
            },
            {
            name: '销售数量(件)',
                    type: 'line',
                    legendHoverLink: false, //禁止高亮
                    itemStyle: {
                    normal: {
                    color: '#ff904d',
                            textStyle: {
                            label: {
                            color: '#ff904d'
                            }
                            },
                            lineStyle: {
                            color: '#ff904d',
                                    width: 1
                            }
                    }
                    },
                    //data: res.allOrdersAmount
            },
            {
            name: '销售总额(元)',
                    type: 'line',
                    legendHoverLink: false, //禁止高亮
                    itemStyle: {
                    normal: {
                    color: '#24a7f6',
                            textStyle: {
                            label: {
                            color: '#24a7f6'
                            }
                            },
                            lineStyle: {
                            color: '#24a7f6',
                                    width: 1
                            }
                    }
                    },
                    //data: res.allOrdersSales
            }
            ]
    };
    function loadRevenue() {
    layer.load(1, {shade: [0.1, '#fff']});
    $.ajax({
    url: "{{asset('admin/operation')}}",
            dataType: 'json',
            type: 'get',
            data: $('#revenue_form').serialize(),
            success: function (res) {
            layer.closeAll();
            console.log(res);
            option.xAxis.data = res.section;
            option.series[0].data = res.allOrdersRevenues; //营收总额
            option.series[1].data = res.allOrdersAmount; //销售数量
            option.series[2].data = res.allOrdersSales; //销售总额
            myChart.setOption(option);
            },
            error: function (err) {
            layer.closeAll();
            alert('网络出错');
            }
    });
    }
    function loadDayCharts(){
    layer.load(1, {shade: [0.1, '#fff']});
    $.ajax({
        url:"{{asset('admin/operation')}}",
        type:'get',
        dataType:'json',
        data:{
                type:'day',
                startDate:$('#daterange').val().substr(0,10),
                endDate:$('#daterange').val().substr(-10)
            },
        success:function(res){
            layer.closeAll();
            console.log(res);
            option.xAxis.data = res.section;
            option.series[0].data = res.allOrdersRevenues; //营收总额
            option.series[1].data = res.allOrdersAmount; //销售数量
            option.series[2].data = res.allOrdersSales; //销售总额
            myChart.setOption(option);
        },
        error:function(err){
            layer.closeAll();
            alert('网络出错');
        }
    });
    }
    /*============================会员的性别统计图=======================*/
    var mySex = echarts.init(document.getElementById("vip_sex"));
    var option2 = {
    tooltip: {
    trigger: 'item',
            formatter: "{a} <br/>{b}: {c}人 ({d}%)"
    },
            series: [
            {
            name: '本网站的统计',
                    type: 'pie',
                    radius: ['50%', '65%'],
                    avoidLabelOverlap: false,
                    label: {
                    normal: {
                    show: false,
                            position: 'center'
                    },
                            emphasis: {
                            show: true,
                                    textStyle: {
                                    fontSize: '20'
                                    }
                            }
                    },
                    labelLine: {
                    normal: {
                    show: false
                    }
                    },
                    data: [
                    {   value:{{$persex['boy']}},
                            name: '女',
//                            改变扇区的颜色
                            itemStyle:{
                            normal:{color:'red'}
                            }
                    },
                    {   value:{{$persex['girl']}},
                            name: '男',
                            itemStyle:{
                            normal:{color:'#0F88EB'}
                            }
                    }

                    ]
            }
            ]
    };
    mySex.setOption(option2);
    /*=============会员统计人数的环形图========================*/
    var myNum = echarts.init(document.getElementById("vip_num"));
    var option3 = {
    tooltip: {
    trigger: 'item',
            formatter: "{a} <br/>{b}: {c} 人"
    },
            legend: {
            orient: 'vertical',
                    x: 'left',
                    data: ['总人数']
            },
            series: [
            {
            name: '网站统计数据',
                    type: 'pie',
                    radius: ['50%', '65%'],
                    avoidLabelOverlap: false,
                    label: {
                    normal: {
                    show: false,
                            position: 'center'
                    },
                            emphasis: {
                            show: true,
                                    textStyle: {
                                    fontSize: '20'
                                    }
                            }
                    },
                    itemStyle: {
                    normal: {
                    color: '#0F88EB'
                    }
                    },
                    labelLine: {
                    normal: {
                    show: false
                    }
                    },
                    data:
            [{value:{{$persons}}, name: '会员总人数'}]
            }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myNum.setOption(option3);
    //添加定时器监听事件,南丁格尔图随着浏览器屏幕的大小的变化而变化
    window.addEventListener("resize", function () {
    setTimeout("myNum.resize()", 100);
    });
    window.addEventListener("resize", function () {
        setTimeout("mySex.resize()", 100);
    });
    window.addEventListener("resize", function () {
        setTimeout("myChart.resize()", 100);
    });
    /*========================会员年龄分布图============================*/
        var myAge= echarts.init(document.getElementById("vip_age"));
        myAge.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} 人 ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left'
                // data: ['15岁以下','15岁到20岁','20岁到30岁','30岁到50岁','50岁以上']
            },
            series: [
                {
                    name: '本网站统计数据',
                    type: 'pie',
                    radius: ['50%', '65%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20'
                            }
                        }
                    },

                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value:{{$age[15]}}, name: '15岁以下',
                            itemStyle:{
                                normal:{color:'#0F88EB'}
                            }},
                        {value:{{$age[20]}}, name: '15岁到20岁',
                            itemStyle:{
                                normal:{color:'#0F00EB'}
                            }},
                        {value:{{$age[30]}}, name: '20岁到30岁',
                            itemStyle:{
                            normal:{color:'green'}
                        }},
                        {value:{{$age[50]}}, name: '30岁到50岁',
                            itemStyle:{
                                normal:{color:'#0F88EB'}
                            }},
                        {value:{{$age[51]}}, name: '50岁以上',
                            itemStyle:{
                                normal:{color:'red'}
                            }}
                    ]
                }]
        });
        window.addEventListener("resize", function () {
            setTimeout("myAge.resize()",100);
        });
</script>
{{--自定义的js文件,用来写===销售信息====折线图--}}
<!--<script type="text/javascript" src="{{asset('/js/operationdate/sell_info.js')}}"></script>-->
@endsection